<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="../desktop/style/index.css">
  <link rel="stylesheet" href="../desktop/style/frame.css">
  <script src="acc/imgs.js"></script>
  <script src="acc/text.js"></script>
  <style>
    .comp-popup {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: transparent;
      transition: all .6s;
    }

    .comp-popup.active {
      background-color: rgba(0, 0, 0, .5);
    }

    .comp-popup .comp-popup-inner {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -100%);
      opacity: 0;
      transition: all .6s;
    }

    .comp-popup.active .comp-popup-inner {
      top: 38.2%;
      transform: translate(-50%, -38.2%);
      opacity: 1;
    }

    .comp-tip {
      padding: 10px;
      background-color: transparent;
      border: 1px solid #fff;
      color: #fff;
    }

    .comp-tip > span {
      padding: 5px 10px;
    }

    .comp-tip > span:first-child {
      border-right: 1px solid #fff;
    }

    .fill-color {
      width: 960px;
      position: absolute;
      z-index: 8;
      left: 50%;
      top: 50%;
      font-size: 0;
      transform: translate(-50%, -50%) scale(.25, .25);
    }

    .fill-color span {
      display: inline-block;
      width: 12px;
      height: 12px;
      font-size: 12px;
      overflow: hidden;
      line-height: 12px;
    }

    * {
      border: 0;
      padding: 0;
      margin: 0;
      outline: 0;
      box-sizing: border-box;
      font-family: "思源黑体 CN";
    }

    *::-webkit-scrollbar {
      width: 0;
    }

    ul, li {
      list-style: none;
    }

    html, body {
      height: 100%;
      width: 100%;
      overflow: hidden;
      position: relative;
      color: #fff;
      text-align: center;
      background-color: #000;
    }

    b {
      display: block;
      position: absolute;
      background-size: 1920px 1080px;
      border-radius: 2px;
      z-index: 2;
      color: pink;
      text-align: center;
    }

    img {
      width: 100%;
      top: 50%;
      left: 50%;
      position: absolute;
      opacity: 0;
      transition: all .6s;
      transform: translate(-50%, -50%);
    }

    .search-box {
      position: absolute;
      left: 50%;
      top: 30%;
      transform: translate(-50%, -50%) scale(.7, .7);
      opacity: 0;
      transition: all 1s;
      z-index: 2;
    }

    .search-box.focus {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1, 1);
    }

    .search-box img {
      width: 741px;
      height: 136px;
      opacity: 1;
      position: relative;
    }

    .search-box span {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      font-size: 52px;
      line-height: 136px;
      text-shadow: 0 0 8px #ffa800;
      color: #fff;
      padding-left: 50px;
    }

    .search-box input {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: right;
      background-color: transparent;
      border: 0;
      outline: 0;
      font-size: 52px;
      line-height: 136px;
      text-shadow: 0 0 8px #ffa800;
      color: #fff;
      padding-left: 35%;
      padding-right: 50px;
    }

    .search-box input::-webkit-input-placeholder {
      color: #fff;
      font-family: "思源黑体 CN";
    }

    .search-box ul {
      position: absolute;
      width: 50%;
      text-align: center;
      left: -20px;
      top: 0;
      transform: translateX(-150%) scale(.5, .5);
      padding: 35px 20px;
      transition: all 1s;
      opacity: 0;
      transform-origin: top;
    }

    .search-box.focus ul {
      opacity: 1;
      transform: translateX(-100%) scale(1, 1);
    }

    .search-box ul li {
      color: #fff;
      text-shadow: 0 0 8px #ffa800;
      opacity: .5;
      font-size: 12px;
      transition: all 1s;
      line-height: 30px;
      transform: translateY(100%);
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .search-box ul li.un-init {
      opacity: 0;
      transform: translateY(0);
    }

    .search-box ul li.active {
      font-size: 16px;
      opacity: 1;
    }

    .search-bar {
      padding: 20px;
      border: 1px dashed #eee;
      text-align: center;
    }

    .search-bar input {
      text-align: center;
      line-height: 30px;
      padding: 0 10px;
      outline: transparent !important;
      color: #333;
      border: 1px solid #eee;
      background-color: rgba(255, 255, 255, .6);
    }

    .wrap {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      position: absolute;
      z-index: 10;
    }

    .lrc-txt {
      position: absolute;
      top: 40%;
      left: 50%;
      width: 520px;
      padding: 10px;
      text-align: center;
      transform: translateX(-50%);
      height: 400px;
      overflow: scroll;
      z-index: 2;
      padding-top: 100px;
    }

    .lrc-txt ul {
      transition: all 1s;
    }

    .lrc-txt li {
      line-height: 30px;
      color: #fff;
      text-shadow: 0 0 8px #ffa800;
      opacity: 0;
      transform: rotateY(100%);
      transition: all 1s;
      font-size: 14px;
    }

    .lrc-txt li.active {
      opacity: 1;
      transform: rotateY(0);
    }

    .lrc-txt li.focus {
      opacity: 1;
      transform: rotateY(0);
      font-size: 18px;
    }

    .dark-wrap {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: background .3s;
      width: 1920px;
      height: 1920px;
      z-index: 2;
    }

    .music-wrap {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 2;
    }

    @keyframes ratating {
      0% {
        transform: translate(-50%, -50%) rotate(0);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    header {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 150px;
      z-index: 10;
    }

    #loadfile {
      position: absolute;
      opacity: 0;
      width: 100%;
      height: 100%;
    }

    .d3-wrap {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      perspective: 300px;
      transform-style: preserve-3d;
      z-index: 3;
    }

    .d3-wrap > .round {
      position: absolute;
      top: 50%;
      left: 50%;
    }

    .d3-wrap > .round > li {
      perspective: 100px;
      transform-style: preserve-3d;
      position: absolute;
      bottom: 0;
      width: 4px;
      border-radius: 2px;
      transform-origin: bottom;
      height: 50px;
      overflow: hidden;
    }

    .img {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 500px;
      height: 500px;
      transform: translate(-50%, -50%);
      z-index: 3;
    }

    .img div {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      background-size: 100%;
      background-position: center center;
      border-radius: 250px;
      transition: border .3s;
      border: 8px solid rgba(255, 255, 255, 1);
      background-color: rgba(255, 255, 255, .2);
      transform: translate(-50%, -50%);
      filter: blur(4px);
      /*animation: linear ratating 60s infinite;*/
    }

    canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1000;
    }
    .github-corner {
      position: fixed;
      top: 0;
      right: 0;
      height: 120px;
      width: 120px;
      color: white;
      fill: green;
      z-index: 100;
    }

  </style>
</head>
<body>
<a href="https://gitee.com/DeyaoCai/valentine" class="github-corner" target="_blank" aria-label="View source on Github">
  <svg viewBox="0 0 250 250" aria-hidden="true">
    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
    <path
      d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
      fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
    <path
      d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
      fill="currentColor" class="octo-body"></path>
  </svg>
</a>
<div class="fill-color"></div>
<div class="wrap">
</div>
<div class="dark-wrap"></div>
<div class="music-wrap">
  <div class="d3-wrap">
    <div class="round"></div>
    <div class="round"></div>
  </div>
  <div class="img">
    <div></div>
  </div>
</div>
<script>
  const getType = item => {
    return Object.prototype.toString.call(item).slice(8, -1);
  };
  getType.isNumber = item => getType(item) === "Number";
  getType.isString = item => getType(item) === "String";
  getType.isArray = item => getType(item) === "Array";
  getType.isObject = item => getType(item) === "Object";
  getType.isBoolean = item => getType(item) === "Boolean";
  getType.isNull = item => getType(item) === "Null";
  getType.isUndefined = item => getType(item) === "Undefined";
  getType.isFunction = item => getType(item) === "Function";
  getType.isDate = item => getType(item) === "Date";


  const {createRender, timeout, range} = {
    createRender(conf) {
      const state = conf.state ? conf.state() : {};
      createRender.wrap || (createRender.wrap = document.createElement("div"));

      function htmlConcator(data) {
        const innerHtml = conf.template(state, data);
        createRender.wrap.innerHTML = innerHtml;
        const dom = createRender.wrap.children[0];
        return {dom, conf, state};
      }

      return function (ele, data) {
        const conf = htmlConcator(data);
        conf.conf.beforeRender && conf.conf.beforeRender(conf.dom, state, data);
        ele.appendChild(conf.dom);
        conf.conf.afterRender && conf.conf.afterRender(conf.dom, state, data);
        return conf.dom;
      }
    },
    timeout(fn, time, times) {
      return function timeouts() {
        if (times !== undefined && times <= 0) return;
        fn();
        times !== undefined && times--;
        setTimeout(timeouts, time === undefined ? 1000 : time);
      }
    },

    animationEndDecorator(dom, notRemoveDomWhileAnimationEnd) {
      const list = [];
      let fn = function () {
        const animationFn = list.shift();
        if (animationFn) animationFn();
        else {
          dom.removeEventListener("webkitTransitionEnd", fn);
          fn = null;
          notRemoveDomWhileAnimationEnd || dom.parentNode && dom.parentNode.removeChild(dom);
        }
      }
      dom.addEventListener("webkitTransitionEnd", fn);
      return function add(fn) {
        list.push(fn);
        return add;
      }
    },
    range(start, width) {
      return function () {
        return Math.round(Math.random() * width) + start - width / 2;
      }
    },
  };

  window.desktopDots = (function () {
    let cont = 0;
    document.body.onmousemove = (ev) => {
      rangeCenterX = range(ev.clientX, sRangeWidth);
      rangeCenterY = range(ev.clientY, sRangeWidth);
      timeout(function () {
        cont%8 || dot.show();
        cont++
      }, 100, 1)();
    }
    document.body.onclick = (ev) => {
      rangeCenterX = range(ev.clientX, sRangeWidth);
      rangeCenterY = range(ev.clientY, sRangeWidth);
      timeout(function () {
        dot.show();
      }, 200, 4)();
    }
    console.log(
      document.body.offsetWidth,
      document.body.offsetHeight,
    )
    const maxHeight = document.body.offsetHeight;
    const maxWidth = document.body.offsetWidth
    const sRangeWidth = maxWidth/3;
    const eRangeWidth = maxWidth;


    let rangeCenterX = range(maxWidth/2, sRangeWidth);
    let rangeCenterY = range(maxHeight/2, sRangeWidth);
    const rangeTopRightX = range(maxWidth/2, eRangeWidth);
    const rangeTopRightY = range(maxHeight/2, eRangeWidth);
    const rangeParticle = range(15, 40);
    const rangeTime = range(100, 180);
    const rangeText = range(1, 3);

    function startBMove(el, state) {
      setTimeout(function () {
        el.style = state.style.replace(/(left|top): [^;]+;/g, "") + `
        left: ${rangeTopRightX()}px;
        top: ${rangeTopRightY()}px;
        transform: rotate(${(Math.random() > .5 ? 1 : -1) * rangeTime()}deg) translate(${rangeParticle() * .3}, ${rangeTime() * .3});
        opacity: 0;
      `;
      }, 20)
    }
    let text = ["点击任意位置播放"];

    window.onload = function () {
      const body = document.body || document.querySelector("body");
      body.onclick = function(){
        mv.play('./acc/music.mp3');
        text = testList
      }
      body.ontouchstart = function(){
        mv.play('./acc/music.mp3');
        text = testList
      }
      body.addEventListener("click",() => {
        mv.play('./acc/music.mp3');
        text = testList
      })
      body.addEventListener("touchstart",() => {
        mv.play('./acc/music.mp3');
        text = testList
      })
    }
    function setBOriStyle(el, state) {
      const x = rangeCenterX();
      const y = rangeCenterY();
      const w = rangeParticle();
      const t = rangeTime();
      el.innerHTML = text[Math.floor(Math.random()*text.length)];
      // el.innerHTML = w < 60 ? w < 24 ? "" : text[Math.abs(Math.round(rangeText()))] : text;
      el.style = state.style = `
    background-position: -${x}px -${y}px;
    background-image: url("${currentImgSrc}");
    left: ${x}px;
    top: ${y}px;
    padding: 10px ;
    white-space: no-warp;
    min-width: ${w}px;
    min-height: ${w}px;
    font-size: ${w / 3}px;
    line-height: ${w}px;
    border-radius: ${w > 80 && Math.random() > .5 ? 4 : w / 2}px;
    transition: all ${t / 10}s;
    transform: rotate(0deg) translate(0, 0);
    opacity: 1;
  `
    }


    let dotBox = document.body;

    function Dot() {
      dotBox = dotBox || document.body;
      this.cacheList = [];
      this.wrap = dotBox;
    }

    Dot.prototype.makeEl = function () {
      let el = document.createElement("b");
      const {cacheList} = this;
      el.addEventListener("webkitTransitionEnd", function () {
        el.parentNode && el.parentNode.removeChild(el);
        cacheList.push(el);
      });
      return el;
    }
    Dot.prototype.show = function () {
      const el = this.cacheList.shift() || this.makeEl();
      const state = {};
      setBOriStyle(el, state);
      this.wrap.appendChild(el);
      startBMove(el, state);
    };
    const dot = new Dot();
    return dot;
  })();


  const tempImg = createRender({
    template: (state, data) => `<img/>`,
    beforeRender: function (dom, state, data) {
      this.startImg(dom, state)
    },
    afterRender: function (dom, state, data) {
      setTimeout(() => {
        this.startImgMove(dom, state)
      }, 200)
    },
    startImg: function startImg(dom) {
      dom.src = currentImgSrc;
      let fn = function () {
        dom.removeEventListener("webkitTransitionEnd", fn);
        prevImg && document.querySelector("body").removeChild(prevImg);
        prevImg = dom;
        fn = null;
      }
      dom.addEventListener("webkitTransitionEnd", fn);
    },
    startImgMove: function startImgMove(item, state) {
      item.style = `opacity: 1;`
    }
  });

  let prevImg = null;
  let imges;
  window.currentImgSrc = null;
  window.currentImgAviColor = [255, 255, 255, 1];
  window.pictrueCanvasCtx = (function () {
    let canvas;

    function Pictrue() {
      this.canvas = canvas = canvas || document.createElement("canvas");
      this.ctx = canvas.getContext('2d');
      this.cacheList = [];
      this.cacheImg = {};
    }

    function sumOfArr(arr) {
      let sum = 0;
      arr.forEach(num => sum += num);
      return sum;
    }

    function aviOfArr(arr) {
      return Math.round(sumOfArr(arr) / arr.length);
    }

    Pictrue.prototype.makeEl = function (type) {
      const img = document.createElement("img");
      const {cacheList, cacheImg, ctx} = this;
      img.onload = function () {
        if (cacheImg[img.src]) {
          currentImgAviColor = cacheImg[img.src];
        } else {
          const {width, height} = img;
          canvas.width = width / 3;
          canvas.height = height / 3;
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          const getImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
          const result = [[], [], [], []];
          getImageData.data.forEach((color, index) => {
            result[index % 4].push(color);
          });
          cacheImg[img.src] = currentImgAviColor = [
            aviOfArr(result[0]), aviOfArr(result[1]), aviOfArr(result[2]), aviOfArr(result[3])
          ];
        }
        img.src = "";
        cacheList.push(img);
      };
      return img;
    };

    Pictrue.prototype.load = function (url) {
      if (!url) return;
      const img = this.cacheList.shift() || this.makeEl();
      img.src = `${url}`;
    };
    return new Pictrue();
  })();
  try {
    imges = imgesList;
    currentImgSrc = imges[0];
    (function () {
      const Musicvisualizer = (function () {
        function Musicvisualizer(obj) {
          this.source = null;
          this.count = 0;
          this.musicConf = obj.musicConf || {volume: 1};

          // 分析器
          this.analyser = Musicvisualizer.ac.createAnalyser();
          this.size = obj.size;
          this.analyser.fftSize = this.size * 2;
          // 目标设备 将数据导入到 destination 中播放， 中间可以连接多个其他“设备”
          // 注意 connect 方法 第一个参数是设备， 第二个是输出（插头）， 第三个是输入（插孔）
          // 比如 splitter.connect(this.gainNodeL, 0, 0); 可以理解为 将左声道控制器的第一个插头 插入声道拆分器的第一个插孔，第二三个参数的默认值为 0；
          // 如果找不到插孔和插槽将报错，但是符合规则的连接将不会报错， 但是可能不是想要的效果。
          const destination = Musicvisualizer.ac.destination;
          // GainNode用来控制音频的音量
          // 总音量
          this.gainNode = Musicvisualizer.ac[Musicvisualizer.ac.createGain ? "createGain" : "createGainNode"]();
          // 左右声道
          this.gainNodeL = Musicvisualizer.ac[Musicvisualizer.ac.createGain ? "createGain" : "createGainNode"]();
          this.gainNodeR = Musicvisualizer.ac[Musicvisualizer.ac.createGain ? "createGain" : "createGainNode"]();
          // 声道拆分器
          const splitter = Musicvisualizer.ac.createChannelSplitter(2);
          // 声道合成器
          const merger = Musicvisualizer.ac.createChannelMerger(2);

          // 左声道音量
          this.gainNodeL.gain.value = 1;
          // 右声道音量
          this.gainNodeR.gain.value = 1;
          // 总音量
          this.gainNode.gain.value = 1;

          // 连接设备到总音量
          this.gainNode.connect(destination);
          // 连接总音量到合并转接口
          merger.connect(this.gainNode);
          // 连接转接口到声道音量控制
          this.gainNodeL.connect(merger, 0, 0);
          this.gainNodeR.connect(merger, 0, 1);
          // 连接声道音量控制到拆分转接口
          splitter.connect(this.gainNodeL, 0, 0);
          splitter.connect(this.gainNodeR, 1, 0);
          // 连接拆分转接口到波谱分析器 // 最终波谱分析器会连接到音频数据
          this.analyser.connect(splitter);

          // ajax
          this.xhr = new XMLHttpRequest();
          // 绘制播放动画的方法由外界导入
          this.draw = obj.draw;

          // 开始绘制
          this.visualize();
        }

// 音频上下文
        Musicvisualizer.ac = new (window.AudioContext || window.webkitAudioContext)();//共用的
// 解决 Chrome 66之后高版本中AudioContext被强行suspend的问题
        if (typeof AudioContext !== "undefined" || typeof webkitAudioContext !== "undefined") {
          const resumeAudio = function () {
            if (typeof Musicvisualizer.ac === "undefined" || Musicvisualizer.ac == null) return;
            if (Musicvisualizer.ac.state === "suspended") Musicvisualizer.ac.resume();
            document.removeEventListener("click", resumeAudio);
          };
          document.addEventListener("click", resumeAudio);
        }
// load -> decode -> play
        Musicvisualizer.prototype.load = function (url, fun) {
          this.xhr.abort();
          this.xhr.open("GET", url);
          this.xhr.responseType = "arraybuffer";
          const self = this;
          this.xhr.onload = function () {
            fun(self.xhr.response);
          };
          this.xhr.send();
        };

// BaseAudioContext.decodeAudioData()用来生成AudioBuffer
// AudioBuffer供AudioBufferSourceNode使用，这样，AudioBufferSourceNode才可以播放音频数据
        Musicvisualizer.prototype.decode = function (arraybuffer, fun) {
          Musicvisualizer.ac.decodeAudioData(arraybuffer, function (buffer) {
            fun(buffer);
          }, function (err) {
            console.log(err);
          });
        };

        Musicvisualizer.prototype.play = function (path) {
          const n = ++this.count;
          const self = this;
          self.source && self.source[self.source.stop ? "stop" : "noteOff"](); // 开始前先暂停之前音频的播放，防止多份音频同时播放
          if (path instanceof ArrayBuffer) {
            self.decode(path, function (buffer) {
              if (n != self.count) return;
              const bufferSource = Musicvisualizer.ac.createBufferSource();
              // 将解码成功后的buffer赋值给bufferSource的buffer属性
              bufferSource.buffer = buffer;
              // bufferSource.loop = true;
              bufferSource.connect(self.analyser);
              bufferSource[bufferSource.start ? "start" : "noteOn"](0);
              self.source = bufferSource;
            });
          } else {
            self.load(path, function (arraybuffer) {
              if (n !== self.count) return;
              self.decode(arraybuffer, function (buffer) {
                if (n !== self.count) return;
                const bufferSource = Musicvisualizer.ac.createBufferSource();
                bufferSource.buffer = buffer;
                bufferSource.connect(self.analyser);
                bufferSource[bufferSource.start ? "start" : "noteOn"](0);
                self.source = bufferSource;
                bufferSource.onended = function () {
                  self.musicConf.ended && self.musicConf.ended();
                };
              });
            });
          }
        };
// 主音量控制方法
        Musicvisualizer.prototype.changeVolumn = function (percent) {
          this.musicConf.volume = this.gainNode.gain.value = percent;
        };
// 左右声道控制方法
        Musicvisualizer.prototype.setVolumn = function () {
          const {x, y, w, h} = mousemoveConf;
          const ry = (x - w / 2) / w;
          const rx = Math.abs((y - h / 2) / w);
          this.gainNodeL.gain.value = (1 - rx - ry) * (1 - rx - ry);
          this.gainNodeR.gain.value = (1 - rx + ry) * (1 - rx + ry);
        };
        Musicvisualizer.prototype.visualize = function () {
          const self = this;
          const arr = new Uint8Array(self.analyser.frequencyBinCount);//数组长度是fftsize的一半
          requestAnimationFrame = window.requestAnimationFrame ||
            window.webkitrequestAnimationFrame ||
            window.mozrequestAnimationFrame;//兼容
          function fn() {
            self.analyser.getByteFrequencyData(arr);// 将音频频域数据复制到传入的Uint8Array数组
            document.body.offsetWidth > document.body.offsetHeight && self.draw(arr);
            self.changeVolumn(self.musicConf.volume);
            requestAnimationFrame(fn);
          }
          requestAnimationFrame(fn);
        }
        return Musicvisualizer;
      })();

// 业务代码
      function linear(r1, r2, index, len) {
        return Math.round(r1 + (r2 - r1) * index / len);
      }

      function draw(arr) {
        const [r, g, b, a] = currentImgAviColor;
        const [[r1, g1, b1], [r2, g2, b2]] = getPure(r, g, b);
        const htmlArr = [];
        const htmlArr2 = [];
        const len = arr.length;
        let sum = 0;
        arr.forEach(function (item, index) {
          sum += item;
          const rotateZDeg = 180;
          const style = `left: -4px; transform: rotateZ(${rotateZDeg / size * (index + .5)}deg) translateY(-250px); height: ${item / 2}px; background: linear-gradient(to bottom, rgba(${linear(r1, r2, index, len)}, ${linear(g1, g2, index, len)}, ${linear(b1, b2, index, len)}, 1), transparent);`;
          const style2 = `left: -4px; transform: rotateZ(${-rotateZDeg / size * (index + .5)}deg) translateY(-250px); height: ${item / 2}px; background: linear-gradient(to bottom, rgba(${linear(r1, r2, index, len)}, ${linear(g1, g2, index, len)}, ${linear(b1, b2, index, len)}, 1), transparent);`;
          const style3 = `left: -4px; transform: rotateZ(${rotateZDeg / size * (index + .5)}deg) translateY(${-250 + item * 2}px); height: 8px; opacity: ${item / 300};background: rgba(${linear(r1, r2, index, len)}, ${linear(g1, g2, index, len)}, ${linear(b1, b2, index, len)}, 1);`;
          const style4 = `left: -4px; transform: rotateZ(${-rotateZDeg / size * (index + .5)}deg) translateY(${-250 + item * 2}px); height: 8px; opacity: ${item / 300};background: rgba(${linear(r1, r2, index, len)}, ${linear(g1, g2, index, len)}, ${linear(b1, b2, index, len)}, 1);`;
          htmlArr.push(`<li style="${style}"></li><li style="${style2}"></li>`);
          htmlArr2.push(`<li style="${style3}"></li><li style="${style4}"></li>`);
        });
        const divs = document.querySelectorAll(".d3-wrap .round");
        const baseAvr = sum / arr.length / 300;
        const avr = baseAvr + .8;
        const {x, y, w, h} = mousemoveConf;
        mv.setVolumn();
        const ry = (x - w / 2) / w * 60;
        const rx = -(y - h / 2) / w * 60;
        divs[0].style = `transform: scale(${avr}, ${avr}) rotateY(${ry}deg) rotateX(${rx}deg);`;
        divs[0].innerHTML = htmlArr.join("");
        divs[1].style = `transform: scale(${avr}, ${avr}) rotateY(${ry}deg) rotateX(${rx}deg);`;
        divs[1].innerHTML = htmlArr2.join("");

        document.querySelector(".dark-wrap").style = `background: radial-gradient(transparent 0%, transparent 15%, rgba(${r1}, ${g1}, ${b1}, .5) ${baseAvr * 80 + 30}%, rgba(${r2}, ${g2}, ${b2}, .8) 100%);`;
        document.querySelector(".img").style = `transform: translate(-50%, -50%) rotateY(${ry}deg) rotateX(${rx}deg) scale(${avr}, ${avr});`;
        document.querySelector(".img div").style = `border: 8px solid rgba(${r2},${g2},${b2}, .8);`;
        getPure(r, g, b, a);
        // require("../pictrue/video.js").load();
      }

      function compose(i) {
        i = i / 255;
        return Math.round((i + (i - .5) * (1 - i)) * 255);
      }

      function dCompose(i, time = 0) {
        i = i / 255;
        let rate = (1 - i);
        while (time + 3) {
          rate *= (1 - i);
          time--;
        }
        return Math.round((1 - rate) * 255);
      }

      function getPure(r, g, b, time = 2) {
        const min = Math.min(r, g, b);
        const per = min / 255;
        return [
          [
            dCompose(r, time),
            dCompose(r, time),
            dCompose(r, time)
          ], [
            dCompose(reduce(r, per), time + 2),
            dCompose(reduce(g, per), time + 2),
            dCompose(reduce(b, per), time + 2)
          ]
        ];
      }

      function reduce(r, per) {
        return Math.round((r - 255 * per) / (1 - per));
      }

      window.mousemoveConf = {x: 0, y: 0, w: 1, h: 1};
      document.addEventListener("mousemove", function (ev) {
        const [x, y, w, h] = [ev.clientX, ev.clientY, ev.target.offsetWidth, ev.target.offsetHeight]
        const conf = {x, y, w, h};
        window.mousemoveConf = conf;
      })

//定义的音频数组长度
      const size = 128;
      window.mv = new Musicvisualizer({size: size, draw, musicConf: window.musicConf});
//初始化音频大小
      mv.changeVolumn(.5);
    })();
    if (currentImgSrc) {
      timeout(function () {
        imges.push(imges.shift())
        currentImgSrc = imges[0];
        pictrueCanvasCtx.load(currentImgSrc);
        tempImg(document.querySelector("body"));
      }, 3000)();
      timeout(function () {
        desktopDots.show()
      }, 400)();
    }
  } catch (e) {
    console.log(e);
  }
</script>
</body>
</html>
